/**
*@description 用户画像》自然人属性》化妆习惯
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import MainLayout from '../components/MainLayout/MainLayout';
import PieSimple from '../components/Persons/PieSimple';
import BarSimple from '../components/Persons/BarSimple';
import TableList from '../components/TableList';
import {Card, Icon, Tooltip, Row, Col} from 'antd';

const tips1 = (<div>化妆频率&nbsp;
  <Tooltip placement="right" title="化妆频率是指用户化妆周期的特征">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
tips2 = (<div>妆容偏好&nbsp;
  <Tooltip placement="right" title="妆容偏好是指用户妆容类别的偏好特征">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
tips3 = (<div>化妆场合&nbsp;
  <Tooltip placement="right" title="化妆场合是指用户化妆场合的特征">
          <Icon type="question-circle-o" />
  </Tooltip></div>);

class PersonsCustom extends Component {
  constructor(props) {
      super(props);
  }
  // 获取数据
  fetchData(type, search){
    this.props.dispatch({
            type: type,
            search: search
    })
  };
  initData(){
    this.fetchData('PersonsCustom/rateQuery','');
    this.fetchData('PersonsCustom/preferenceQuery','');
    this.fetchData('PersonsCustom/occasionQuery','');
  };
  componentWillMount() {
    this.initData();
  };
  render(){
  return (
    <MainLayout>
        <Row gutter={16} style={{marginTop:"29px"}}>
              <Col className="gutter-row" span={16}>
              <div className="gutter-box">
                    <Card title={tips1}>
                      <PieSimple data={this.props.PersonsCustom.rateData} labelPosition={true} loading={this.props.PersonsCustom.rateLoading} seriesName="化妆频率" width={"100%"} height={300} />
                    </Card>
                    <Row gutter={16}>
                        <Col className="gutter-row" span={12}>
                            <div className="gutter-box">
                              <Card title={tips2}>
                                    <BarSimple seriesName="妆容偏好" data={this.props.PersonsCustom.preferenceData} loading={this.props.PersonsCustom.preferenceLoading} width={"100%"} height={300} />
                              </Card>
                            </div>
                        </Col>
                        <Col className="gutter-row" span={12}>
                              <div className="gutter-box">
                                  <Card title={tips3}>
                                        <BarSimple seriesName="化妆场合" data={this.props.PersonsCustom.occasionData} loading={this.props.PersonsCustom.occasionLoading} width={"100%"} height={300} />
                                  </Card>
                            </div>
                        </Col>
                    </Row>
              </div>
              </Col>
              <Col className="gutter-row" span={8}><div className="gutter-box"><TableList pageSize={18} /></div></Col>
        </Row>
    </MainLayout>
  );
  }
};

PersonsCustom.propTypes = {
};

function mapStateToProps({ PersonsCustom }) {
  return {
    PersonsCustom: {...PersonsCustom},
  };
}

export default connect(mapStateToProps)(PersonsCustom);